// components/canvas-ring/canvas-ring.js
var windWidth = wx.getSystemInfoSync().windowWidth;
Component({
  options: {
    multipleSlots: true, // 在组件定义时的选项中启用多slot支持
  },

  /**
   * 组件的属性列表
   */
  properties: {
    //画布的宽度 默认占屏幕宽度的0.4倍
    canvasWidth: {
      type: Number,
      value: windWidth * 0.4
    },
    //线条宽度 默认10
    lineWidth: {
      type: Number,
      value: 15
    },
    //线条颜色 默认"#393"
    lineColor: {
      type: String,
      value: "#284889"
    },
    //标题 默认“完成率”
    title: {
      type: String,
      value: "完成率"
    },
    subTitle: {
      type: String,
      value: ""
    },
    //当前的值 默认45
    value: {
      type: Number,
      value: 45
    },
    //值的颜色 默认"#ff9c07"
    valueColor: {
      type: String,
      value: "#ff9c07"
    },
    //最大值 默认100
    maxValue: {
      type: Number,
      value: 100
    },
    //最小值 默认0
    minValue: {
      type: Number,
      value: 0
    },
    //当前值的后缀名
    suffix: {
      type: null,
      value: "%"
    },
    //从什么角度开始 0~360之间 （12点方向为0,18点方向为180,0点方向为360）
    startDegree: {
      type: Number,
      value: 0
    }

  },

  /**
   * 组件的初始数据
   */
  data: {
    canvasWidth: windWidth * 0.4,
    isMarginTop: true,
    value: 0,
    canvasWidth: windWidth * 0.4,
    //线条宽度 默认10
    lineWidth: 10,
    //线条颜色 默认"#393"
    lineColor: "#284889",
    //标题 默认“完成率”
    title: "完成率",
    //当前的值 默认45
    value: 45,
    //值的颜色 默认"#ff9c07"
    valueColor: "#ff9c07",
    //最大值 默认100
    maxValue: 100,
    //最小值 默认0
    minValue: 0,
    //当前值的后缀名
    suffix: "%",
    //从什么角度开始 0~360之间 （12点方向为0,18点方向为180,0点方向为360）
    startDegree: 0

  },

  /**
   * 组件的方法列表
   */
  methods: {

    drawCanvasRing() {
      //canvas 2d
      const query = wx.createSelectorQuery().in(this);
      query.select('#myCanvas')
        .fields({ node: true , size: true})
        .exec(this.init.bind(this))
    },
    init(res){
      var that = this;
      const canvas = res[0].node
      const ctx = canvas.getContext('2d');
      const dpr = wx.getSystemInfoSync().pixelRatio
      canvas.width = res[0].width * dpr
      canvas.height = res[0].height * dpr
      ctx.scale(dpr, dpr);

      ctx.font="11pt Verdana"
      ctx.fillText(that.data.title, res[0].width/2-42, res[0].height/2-10)
      ctx.fillText(that .data.subTitle, res[0].width/2-42, res[0].height/2+10)
      
      function render(ctx,circle_r,percent,startDegree) {
      //有色彩的圆弧
      ctx.lineCap = 'round';
      ctx.beginPath();
      ctx.strokeStyle=lineColor;
      ctx.lineWidth=lineWidth;
      ctx.arc(0, 0, circle_r - 10, startDegree * Math.PI / 180 - 0.5 * Math.PI, percent * Math.PI / 180 + startDegree * Math.PI / 180 - 0.5 * Math.PI, false);
      ctx.stroke();
      ctx.closePath();
      };
      
      var num = 0;
         // 大小值的计算
         var circle_r = this.data.canvasWidth / 2; //画布的一半，用来找中心点和半径
         var startDegree = this.data.startDegree; //从什么角度开始
         var maxValue = this.data.maxValue; //最大值
         var minValue = this.data.minValue; //最小值
         var lineColor = this.data.lineColor; //线条颜色
         var lineWidth = this.data.lineWidth; //线条宽度
           //定义起始点
      ctx.translate(circle_r, circle_r);
      //灰色圆弧
      ctx.beginPath();
      ctx.strokeStyle="#ebebeb";
      ctx.lineWidth=lineWidth;
      ctx.arc(0, 0, circle_r - 10, 0, 2 * Math.PI, true);
      ctx.stroke();
      ctx.closePath();
      var value = that.data.value; //当前的值
    
     
      const renderLoop = () => {
      
        num++; 
        var percent = 360 * ((num - minValue) / (maxValue - minValue)); //计算结果
        render(ctx,circle_r,percent,startDegree);
        if(num<=value) {
          canvas.requestAnimationFrame(renderLoop)
        } else {
          
            wx.setStorageSync('ringcache', canvas.toDataURL('image/png',0.92));
          
          
        }  
      }
      canvas.requestAnimationFrame(renderLoop); 
      
    }

  },
})